<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../common/vue2/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{returnData.title}}
      <blog-post
        v-for="post in posts"
        :key="post.id"
        :post="post"
        v-on:enlarge-text="enlargeText"
       
      ></blog-post>
    </div>

    <script type="text/javascript">
        Vue.component("blog-post", {
          data: function () {
            return {
              count: 0,
            };
          },
          props: ["post"],
          template: `<div class="blog-post">
          <h3>{{ post.title }}</h3>
          <button v-on:click="clickMe()">
            Enlarge text
          </button>
          <div v-html="post.content"></div>
        </div>`,
        methods:{
          clickMe:function(){
            var data =  {
              id:3,
              title:'hahah'
            }
            this.$emit('enlarge-text',data);
          }
        }
        });

        var app = new Vue({
          el: "#app",
          data: {
            message: "Hello Vue!",
            counter: 0,
            returnData:{id:3,title:'zhaozhijie'},
      postFontSize:6,
            posts: [
              { id: 1, title: "my journey to west",content:'西游记' },
              { id: 2, title: "harry potter" ,content:'哈利波特'},
              { id: 3, title: "cat warrior",content:'猫武士' },
            ],
          },
          methods: {
            greet: function (event) {
              // `this` 在方法里指向当前 Vue 实例
              alert("Hello " + this.name + "!");
              // `event` 是原生 DOM 事件
              if (event) {
                alert(event.target.tagName);
              }

            },
            enlargeText:function(data){
               
                this.returnData = data;
              }
          },
        });
    </script>
  </body>
</html>
